<template>
    <div class="file-directory">
      
      <el-row style="margin-bottom: 10px" align="middle">
        <el-col :span="6">
          <el-row align="middle">
           
            <el-button type="success" @click="uploadClick" :disabled="isSearch" plain>上传文件</el-button>
            <el-upload
              v-show="false"
              action="/api/Department/UploadShareFiles"
              :data="{ path: DirPath }"
              :file-list="uploadFileList"
              :show-file-list="false"
              :multiple="true"
              :before-upload="beforeUpload"
              :on-progress="uploadProgress"
              :on-success="uploadSuccess">
              <el-button id="uploadBtn"></el-button>
            </el-upload>
          </el-row>
        </el-col>
        <el-col :span="18">
          <el-row justify="space-between" align="middle">
            <el-col :span="10">
              <div class="st">提示：上传文件前请核对目录，确保文件上传至正确的目录中。</div>
            </el-col>
            <el-col :span="6">
              <el-input
                v-model="searchKey"
                :disabled="isSearch"
                @change="inputChange"
                placeholder="模糊搜索：文件名、关键词"
                suffix-icon="Search"
                clearable></el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row v-loading="isSearch" element-loading-text="搜索中 . . ." element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-col :span="6">
          <el-scrollbar :max-height="activeHeight" :always="true">
            <el-tree
              ref="treeRef"
              node-key="DirPath"
              :data="fileInfoData"
              :props="defaultProps"
              @node-click="nodeClick"
              :expand-on-click-node="false"
              :highlight-current="true"
              default-expand-all>
              <template #default="{ node }">
                <el-row justify="space-between" align="middle" style="width: 100%">
                  <el-col :span="1">
                    <el-image v-if="node.level === 1" style="width: 20px; height: 20px" src="http://172.26.166.11:18080/file-icon/drive_icon.png" fit="cover"></el-image>
                    <el-image v-else style="width: 20px; height: 20px" src="http://172.26.166.11:18080/file-icon/folder_icon.png" fit="cover"></el-image>
                  </el-col>
                  <el-col :span="12">
                    <span>{{ node.label }}</span>
                  </el-col>
                  <el-col :span="10">
                    <el-row justify="end" align="middle">
                      <el-text v-if="node.level !== 1" type="primary" @click="newSubdirectory(node)" style="margin-right: 8px;font-size: 12px;">新建</el-text>
                     
                      <el-text
                       v-if="node.level !== 1 && node.level !== 2"
                        type="primary"
                        @click="renameSubdir(node)"
                        style="margin-right: 8px;font-size: 12px;">
                        重命名
                      </el-text>
                      <el-popconfirm
                       v-if="node.level !== 1 && node.level !== 2"
                        title="您确定删除吗？"
                        width="160"
                        icon="InfoFilled"
                        icon-color="red"
                        cancel-button-text="我再想想"
                        @confirm="deleteFileInfoClick(node)">
                        <template #reference>
                          <el-text v-if="node.level !== 1 && node.level !== 2" type="primary" style="margin-right: 10px;font-size: 12px;">删除</el-text>
                        </template>
                      </el-popconfirm>
                    </el-row>
                  </el-col>
                </el-row>
              </template>
            </el-tree>
          </el-scrollbar>
        </el-col>
        <el-col :span="18">
          <el-card shadow="never" class="foloder-list">
            <el-table :data="fileDocData" size="small" :height="activeHeight" @row-dblclick="rowDBClick">
              <template #empty>
                <el-text style="font-size: 30px" type="info" tag="b">{{ fileEmptyText }}</el-text>
              </template>
              <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
              <el-table-column width="500" label="名称" prop="file_name" header-align="center" show-overflow-tooltip>
                <template #default="scope">
                  <span>
                    <el-row align="middle">
                      <el-col :span="2">
                        <el-row  justify="center">
                         
                            <svg  v-if="scope.row.file_name.includes('xlsx')"
                           class="icon" style="width: 15px; height: 15px; vertical-align: middle; fill: currentcolor; overflow: hidden; --darkreader-inline-fill: currentcolor;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4562" data-darkreader-inline-fill=""><path d="M117.760986 0.00128a52.863868 52.863868 0 0 0-37.631906 15.359962A53.119867 53.119867 0 0 0 64.00112 51.201152v921.597696c0 13.567966 5.759986 26.495934 16.12796 35.83991A54.399864 54.399864 0 0 0 117.760986 1023.99872h788.478028a52.799868 52.799868 0 0 0 37.631906-15.359962 49.343877 49.343877 0 0 0 16.12796-35.83991V290.112555L671.9996 0.00128H117.760986z" fill="#00B632" p-id="4563" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #008b26;"></path><path d="M959.99888 288.00056h-241.919395c-25.215937-0.639998-45.439886-23.039942-46.079885-50.815873V0.00128L959.99888 288.00056z" fill="#7FDA98" p-id="4564" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #78cf8f;"></path><path d="M450.624153 631.487701L269.312607 384.00032h125.311686L513.279997 561.151877 637.439686 384.00032h121.279697L573.311847 631.487701 767.99936 894.783043h-126.591684l-130.815672-187.711531L380.16033 895.99904H256.00064z" fill="#FFFFFF" p-id="4565" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dcdbd8;"></path></svg>
                      
                           <svg  v-else-if="scope.row.file_name.includes('doc')" class="icon" style="width: 15px; height: 15px; vertical-align: middle; fill: currentcolor; overflow: hidden; --darkreader-inline-fill: currentcolor;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5492" data-darkreader-inline-fill=""><path d="M145.6 0C100.8 0 64 35.2 64 80v862.4C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#14A9DA" p-id="5493" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #0f80a5;"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#0F93D0" p-id="5494" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #3bafe5;"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="5495" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dcdbd8;"></path><path d="M291.2 862.4h-48c-9.6 0-17.6-8-17.6-17.6v-158.4c0-9.6 8-16 17.6-16h48c60.8 0 99.2 41.6 99.2 96s-38.4 96-99.2 96z m0-171.2h-41.6v148.8h41.6c48 0 75.2-33.6 75.2-73.6 0-41.6-27.2-75.2-75.2-75.2z m232 174.4c-57.6 0-96-43.2-96-99.2s38.4-99.2 96-99.2c56 0 94.4 41.6 94.4 99.2 0 56-38.4 99.2-94.4 99.2z m0-177.6c-43.2 0-70.4 33.6-70.4 78.4 0 44.8 27.2 76.8 70.4 76.8 41.6 0 70.4-32 70.4-76.8S564.8 688 523.2 688z m294.4 6.4c1.6 1.6 3.2 4.8 3.2 8 0 6.4-4.8 11.2-11.2 11.2-3.2 0-6.4-1.6-8-3.2-11.2-14.4-30.4-22.4-48-22.4-41.6 0-73.6 32-73.6 78.4 0 44.8 32 76.8 73.6 76.8 17.6 0 35.2-6.4 48-20.8 1.6-3.2 4.8-4.8 8-4.8 6.4 0 11.2 6.4 11.2 12.8 0 3.2-1.6 4.8-3.2 8-14.4 16-35.2 27.2-64 27.2-56 0-99.2-40-99.2-99.2s43.2-99.2 99.2-99.2c28.8 0 49.6 11.2 64 27.2z" fill="#FFFFFF" p-id="5496" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dcdbd8;"></path></svg>
                      
                           <svg v-else-if="scope.row.file_name.includes('pdf')" class="icon" style="width: 15px; height: 15px; vertical-align: middle; fill: currentcolor; overflow: hidden; --darkreader-inline-fill: currentcolor;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1581" data-darkreader-inline-fill=""><path d="M145.621959 0c-44.79888 0-79.998 36.81188-79.998 81.61076v860.77848c0 44.79888 35.19912 81.61076 79.998 81.61076h732.781681a81.969151 81.969151 0 0 0 81.61076-81.61076V324.80468L657.60916 0h-511.987201z" fill="#F05542" p-id="1582" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #991c0c;"></path><path d="M657.60916 0v233.59416c0 25.59936 17.61236 92.79768 97.61036 92.79768h204.79488L657.60916 0z" fill="#FFFFFF" p-id="1583" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dcdbd8;"></path><path d="M226.208745 708.129497c0.40959-1.791955 0.972776-3.507112 1.715157-5.094273L230.40704 697.633759a99.530312 99.530312 0 0 0 5.836654-17.381965l5.862253-24.0122a2497.98555 2497.98555 0 0 1 9.59976-38.245444c1.61276-6.092648 3.532712-12.466888 5.785456-19.122722l7.039824-20.633084 7.423814-21.887453c2.508737-7.475013 4.761481-15.257219 6.758231-23.244219a3.839904 3.839904 0 0 0 0.153596-1.20317c0-0.79358-0.255994-1.305567-0.742381-1.510362s-1.151971-0.307192-1.945551-0.307192c-2.508737 0-4.582285-0.38399-6.220645-1.126372a10.188545 10.188545 0 0 1-5.913452-7.039824 29.18327 29.18327 0 0 1 0.998375-15.436414c1.049574-2.636734 2.40634-4.710282 4.044699-6.143846s3.455914-2.508737 5.401465-3.148722 3.839904-1.177571 5.708657-1.58716 3.481513-0.81918 4.863878-1.279968 2.40634-1.279968 2.995126-2.483138c0.998375-2.099148 1.919952-4.326292 2.76473-6.681433s1.919952-4.531087 3.22552-6.527837 2.892728-3.660708 4.81268-4.940676 4.40309-1.945551 7.500612-1.945552c2.201545 0 4.147096 0.588785 5.862253 1.791956s3.174321 2.687933 4.42869 4.505487 2.329542 3.737507 3.225519 5.785455l2.40634 5.63186a310.00825 310.00825 0 0 1 43.800505 4.198295c7.500612 1.407965 15.026824 3.507112 22.578635 6.297442s14.361241 6.425439 20.40269 10.879728 11.007725 9.702157 14.847629 15.743607 5.785455 12.978876 5.785456 20.78668c0 3.9935-0.460788 8.140596-1.356767 12.441289l-1.049573 5.247869c-0.79358 4.198295-2.483138 8.089398-5.017475 11.698907s-5.427064 6.860628-8.626984 9.753356c-8.908577 8.191795-18.661933 15.078023-29.260069 20.633084s-21.657059 10.214145-33.151171 14.02845-23.244219 6.988625-35.250319 9.59976-23.858604 5.043074-35.557511 7.347016l-4.198295 0.588785c-2.303942 0.307192-3.660708 1.151971-4.044699 2.559936-1.99675 6.911827-3.58391 12.953276-4.735881 18.149947s-2.227144 10.162946-3.22552 14.924427l-2.995125 14.258843c-0.998375 4.761481-2.252744 10.034949-3.737506 15.820405-0.511987 1.894353-1.407965 4.147096-2.687933 6.758231s-2.841529 5.043074-4.659084 7.347016-3.865503 4.275093-6.220644 5.913452-4.81268 2.483138-7.423814 2.483138c-1.791955 0-3.353516-0.511987-4.659084-1.510362s-2.38074-2.278343-3.225519-3.814305-1.510362-3.225519-1.945552-5.017474-0.665583-3.507112-0.665583-5.094273v-1.715157c0-0.537587 0-1.126372 0.204795-1.638359z m59.544111-110.845229l-0.819179 2.636734a73.828554 73.828554 0 0 0-1.715157 6.451039 11.007725 11.007725 0 0 0-0.307193 2.022349c0 0.511987 0.076798 0.921577 0.230394 1.279968s0.486388 0.537587 0.972776 0.537587c0.307192 0 1.254369-0.127997 2.841529-0.383991s3.532712-0.563186 5.785455-0.972775 4.684683-0.844779 7.270219-1.356766 5.094273-0.998375 7.500612-1.510363a343.159421 343.159421 0 0 0 42.955726-12.594885c7.347016-2.687933 14.38684-5.60626 21.068274-8.703782s12.646084-6.39984 17.842754-9.906953c5.503862-3.711907 9.906952-7.398215 13.209269-11.110122s4.940676-7.654209 4.940677-11.852503c0-2.508737-0.332792-4.735882-0.972776-6.681433s-1.382365-3.737507-2.175946-5.324667c-2.995125-4.889478-6.758231-8.754981-11.238119-11.545312s-9.394965-4.889478-14.694032-6.297442-10.854129-2.303942-16.639584-2.687933-11.494113-0.588785-17.100373-0.588785c-1.510362 0-3.763106 0.102397-6.835029 0.307192s-6.246244 0.460788-9.59976 0.742381-6.451039 0.665583-9.292568 1.126372-4.78708 0.972776-5.785455 1.587161c-0.511987 0.307192-0.921577 0.79358-1.279968 1.510362s-0.614385 1.305567-0.819179 1.791955l-3.302318 8.319792c-1.407965 3.532712-2.892728 7.526212-4.505487 11.929302s-3.276718 9.062173-5.017475 13.951651-3.430314 9.676558-5.017474 14.335642l-4.42869 13.055673a167.59901 167.59901 0 0 0-3.071923 9.932552zM421.045474 692.693083c4.607885-3.302317 9.266968-5.375866 14.028449-6.220645s9.778956-1.535962 15.078023-2.022349l37.503063-151.804205-3.379116-0.076798c-1.843154-0.051199-3.891103-0.204795-6.143846-0.460789s-4.479888-0.665583-6.681433-1.279968-3.839904-1.459164-4.940677-2.559936a54.552236 54.552236 0 0 1-4.044699-6.502237c-0.691183-1.331167-1.305567-2.713532-1.791955-4.121497s-0.742381-2.79033-0.742381-4.198295c0-2.303942 0.972776-4.223894 2.918327-5.785456s4.351891-2.79033 7.19342-3.737506 5.913452-1.61276 9.21577-2.02235 6.297443-0.588785 9.010974-0.588785c12.594885 0 24.268193 0.38399 35.019925 1.126372s20.81228 2.38074 30.156046 4.863878 18.149946 6.041449 26.39294 10.649334 16.127597 10.751731 23.628209 18.457139c2.79033 2.892728 5.478263 6.143846 8.0126 9.753356a74.238144 74.238144 0 0 1 11.494113 25.420164c1.20317 4.838279 1.791955 9.98375 1.791955 15.385216a95.792805 95.792805 0 0 1-1.663959 17.381965 115.529912 115.529912 0 0 1-30.540036 54.680233c-6.963026 6.963026-14.566036 12.978876-22.885828 18.073148s-16.895578 9.548561-25.804155 13.337267-17.945151 7.091023-27.160921 9.906952-18.149946 5.299068-26.853728 7.500613h0.153596c-3.891103 1.20317-8.089398 2.252744-12.594885 3.148721s-9.062173 1.638359-13.644459 2.252744-9.164571 1.075173-13.721257 1.433564-8.831779 0.537587-12.82528 0.537586c-4.40309 0-8.089398-0.281593-11.110122-0.819179s-5.427064-1.305567-7.270218-2.252744-3.174321-2.022349-3.967901-3.225519-1.20317-2.508737-1.20317-3.891103c0-1.99675 0.563186-4.070298 1.715157-6.220644s3.071923-4.223894 5.657459-6.118247z m65.99515-43.058124l-3.737507 15.743607c-1.279968 5.401465-2.559936 10.700532-3.737506 15.897202l3.455913-0.742381a309.470663 309.470663 0 0 0 21.913053-5.990251 212.986675 212.986675 0 0 0 32.639184-12.978875 178.427539 178.427539 0 0 0 34.866328-22.297043c5.401465-4.40309 10.137347-9.113372 14.258844-14.182045s7.372616-10.342141 9.830154-15.897203 3.686308-11.314917 3.686308-17.330766c0-6.092648-1.20317-11.878103-3.60951-17.330767s-5.631859-10.495738-9.676558-15.154821-8.754981-8.80618-14.105248-12.441289-10.982125-6.732632-16.76758-9.343767-11.673308-4.582285-17.61236-5.913452-11.570911-2.022349-16.869978-2.022349c-7.500612 19.404315-13.900452 39.090223-19.19952 59.108922s-10.41894 40.267793-15.334017 60.875278zM715.054124 553.176571c-0.79358 1.20317-1.817555 3.276718-3.071924 6.220644s-2.559936 6.348641-3.891102 10.188545-2.687933 7.935802-4.044699 12.236494-2.611135 8.319792-3.737507 12.082898-2.124747 7.039824-2.918327 9.906953-1.305567 4.735882-1.510362 5.631859c-0.204795 1.100772-0.563186 2.739132-1.126372 4.940676l-1.433564 5.708658c11.21252-3.788705 22.271443-6.937427 33.227969-9.446164a146.940326 146.940326 0 0 1 39.679008-3.583911c2.81593 0.102397 5.555061 0.486388 8.242994 1.126372s5.017475 1.663958 6.963026 3.071923 2.918327 3.404715 2.918327 5.990251l-0.153596 1.868753a18.252344 18.252344 0 0 1-3.225519 8.473388 9.036574 9.036574 0 0 1-4.275093 3.302318c-1.100772-0.102397-2.175946-0.153596-3.22552-0.153597h-3.225519c-7.091023 0-14.233244 0.614385-21.375466 1.868754s-14.361241 2.943926-21.60586 5.094272-14.463638 4.710282-21.682658 7.654209-14.38684 6.067048-21.58026 9.369366l-15.154821 65.559961c-0.204795 1.689558-1.023974 3.225519-2.483138 4.582285s-2.867128 2.022349-4.275093 2.02235h-3.60951c-3.788705 0-6.425439-1.561561-7.884603-4.659084s-2.175946-7.091023-2.175945-12.0061c0-4.095898 0.358391-8.575786 1.049573-13.414064s1.510362-9.574161 2.40634-14.182046l2.40634-12.594885c0.716782-3.788705 1.049574-6.707032 1.049574-8.703782-1.20317-1.689558-2.40634-3.507112-3.60951-5.401465s-1.791955-4.249494-1.791955-7.039824c0-4.40309 1.151971-7.910202 3.455913-10.495738s5.350266-5.145471 9.138972-7.654209c0.40959-0.307192 0.81918-0.844779 1.279968-1.638359s0.844779-1.689558 1.20317-2.687932 0.639984-1.99675 0.895977-2.995126l0.665584-2.559936 6.143846-22.194645a1206.216245 1206.216245 0 0 1 16.127597-54.526636l3.967901-12.082898c0.40959-1.305567 1.075173-3.148721 2.022349-5.555062s2.099148-4.761481 3.455914-7.039824 2.867128-4.300692 4.582285-5.99025 3.558311-2.559936 5.555061-2.559936c4.505487 0 7.577411 0.38399 9.21577 1.126372s2.713532 1.715157 3.225519 2.918327l1.356766 3.302318c1.61276-0.204795 3.865503-0.563186 6.83503-1.126372s5.99025-1.177571 9.138971-1.868754 6.067048-1.382365 8.780581-2.022349 4.659084-1.177571 5.862253-1.58716c6.707032-1.791955 12.850879-3.353516 18.457139-4.659084s10.905327-2.38074 15.897202-3.225519 9.804555-1.484763 14.41244-1.868754 9.241369-0.588785 13.951651-0.588785c2.201545 0 4.249494 0.102397 6.143846 0.307193s3.532712 0.563186 4.863879 1.126371 2.431939 1.356766 3.225519 2.40634 1.20317 2.431939 1.20317 4.121497a14.617235 14.617235 0 0 1-2.534336 7.423815 15.61561 15.61561 0 0 1-9.471764 6.502237c-0.691183 0.204795-1.945551 0.486388-3.737506 0.81918l-6.220645 1.126371-7.500612 1.279968-7.577411 1.279968c-3.788705 0.895978-8.063798 1.868753-12.825279 2.918327s-9.702157 2.227144-14.847629 3.532712-10.316542 2.687933-15.513212 4.198295-10.111747 3.046324-14.694033 4.659084-8.729382 3.251119-12.364491 4.940676-6.553436 3.430314-8.652583 5.22227z" fill="#FFFFFF" p-id="1584" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dcdbd8;"></path></svg>
                        
                           <svg v-else class="icon" style="width: 15px; height: 15px; vertical-align: middle; fill: currentcolor; overflow: hidden; --darkreader-inline-fill: currentcolor;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3535" data-darkreader-inline-fill=""><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="3536" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #191b1c;"></path><path d="M102.4 68.266667a34.133333 34.133333 0 0 1 34.133333-34.133334h750.933334a34.133333 34.133333 0 0 1 34.133333 34.133334v634.402133a34.133333 34.133333 0 0 1-10.001067 24.132267l-253.064533 253.064533a34.133333 34.133333 0 0 1-24.132267 10.001067H136.533333a34.133333 34.133333 0 0 1-34.133333-34.133334V68.266667z" fill="#11AA66" p-id="3537" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #0d814e;"></path><path d="M238.933333 238.933333a34.133333 34.133333 0 0 1 34.133334-34.133333h477.866666a34.133333 34.133333 0 1 1 0 68.266667H273.066667a34.133333 34.133333 0 0 1-34.133334-34.133334z m0 204.8a34.133333 34.133333 0 0 1 34.133334-34.133333h477.866666a34.133333 34.133333 0 1 1 0 68.266667H273.066667a34.133333 34.133333 0 0 1-34.133334-34.133334z m34.133334 170.666667a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H273.066667z" fill="#FFFFFF" p-id="3538" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #dcdbd8;"></path><path d="M648.533333 750.933333a34.133333 34.133333 0 0 1 34.133334-34.133333h230.7072a3.413333 3.413333 0 0 1 2.389333 5.802667l-261.393067 261.461333a3.413333 3.413333 0 0 1-5.8368-2.423467V750.933333z" fill="#FFAA44" p-id="3539" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #f2a345;"></path></svg>
                          </el-row>
                      </el-col>
                      <el-col :span="22">
                        <el-row justify="start">
                          <el-text type="primary" size="small" tag="ins" @click="linkClick(scope.row)">{{ scope.row.file_name }}</el-text>
                        </el-row>
                      </el-col>
                    </el-row>
                  </span>
                </template>
              </el-table-column>
          
         
              <el-table-column label="最后修改日期" prop="create_time" align="center"></el-table-column>
             
              <el-table-column label="大小" prop="file_size_inBytes" header-align="center" align="center" >
                <template #default="scope">
                  <div>{{ convertFileSize(scope.row.file_size_inBytes) }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" >
                <template #default="scope">
                  <el-text type="primary" size="small" style="margin-right: 8px" @click="downloadClick(scope.row)">下载</el-text>
                  <el-popconfirm
                    title="您确定删除吗？"
                    width="160"
                    icon="InfoFilled"
                    icon-color="red"
                    cancel-button-text="我再想想"
                    @confirm="deleteDocFile(scope.row)">
                    <template #reference>
                      <el-text type="primary" size="small" style="margin-right: 10px">删除</el-text>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <el-dialog
        title="编辑关键词"
        v-model="keywordsVisible"
        @close="closeKeywordsDialog(keywordsRef)"
        :close-on-click-modal="false"
        width="20%"
        draggable>
        <el-form ref="keywordsRef" :model="keywordsForm" :rules="rules" label-width="80px">
          <el-form-item label="关键词" prop="keywordsArray">
            <el-select
              v-model="keywordsForm.keywordsArray"
              multiple
              filterable
              clearable
              allow-create
              defalut-first-option
              :reserve-keyword="false"
              style="width: 100%">
              <el-option v-for="(item,index) in keywordsOptions" :label="item" :value="item" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="submitKeywordsForm(keywordsRef)">保存</el-button>
          <el-button @click="closeKeywordsDialog(keywordsRef)">取消</el-button>
        </template>
      </el-dialog>
      <el-dialog
        title="上传进度"
        v-model="uploadDetailsVisible"
        :before-close="beforeUploadDetailsClose"
        width="30%"
        :close-on-click-modal="false">
        <el-row style="margin-bottom: 15px">
          <el-text type="info">{{ getUploadTips() }}</el-text>
        </el-row>
        <el-scrollbar :max-height="activeHeight / 2" :always="true">
          <div style="margin-bottom: 15px" v-for="(item, index) in uploadFileList" :key="index">
            <el-text size="small">{{ index + 1 }}. </el-text>
            <el-text type="danger" size="small">
              {{ item.uploadStatus && item.uploadStatus !== "success" ? item.uploadStatus + "：" : "" }}
            </el-text>
            <el-text size="small">{{ item.name }}</el-text>
            <el-progress
              style="width: 100%"
              :percentage="item.percentage ? item.percentage : 0"
              striped
              :stroke-width="10"
              :status="getUploadStatus(item)">
              <!-- <template #default="{ percentage }">{{ percentage }}%</template> -->
            </el-progress>
          </div>
        </el-scrollbar>
      </el-dialog>
      <el-dialog
        :title="directoryTitle"
        v-model="fileInfoVisible"
        @close="closeFileInfoDialog(fileInfoRef)"
        :close-on-click-modal="false"
        width="50%"
        draggable>
        <el-form ref="fileInfoRef" :model="fileInfoForm" :rules="rules" label-width="80px">
          <el-form-item label="目录地址" prop="DirPath">
            <el-input v-model="fileInfoForm.DirPath" placeholder="目录\目录">
              <template #prepend>
                <span v-if="directoryTitle === '新建子目录'">{{ subdirPath }}</span>
                <el-select v-else v-model="fileInfoForm.drivePath" placeholder="盘符" style="width: 130px">
                  <el-option v-for="(item,index) in driveOptions" :label="item.name" :value="item.path" :key="index"></el-option>
                </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="directoryTitle !== '新建子目录'" label="目录别名" prop="DirName">
            <el-input v-model="fileInfoForm.DirName"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="submitFileInfoForm(fileInfoRef)">保存</el-button>
          <el-button @click="closeFileInfoDialog(fileInfoRef)">取消</el-button>
        </template>
      </el-dialog>
      <el-dialog title="重命名子目录" v-model="renameSubdirVisible" :close-on-click-modal="false" width="50%" draggable>
        <el-form ref="renameSubdirRef" :model="renameSubdirForm" :rules="rules" label-width="80px">
          <el-form-item label="新目录名" prop="newPath">
            <el-input v-model="renameSubdirForm.newPath">
              <template #prepend>
                <span>{{ renameSubdirForm.parentPath }}</span>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="submitRenameSubdirForm(renameSubdirRef)">保存</el-button>
          <el-button @click="closeRenameSubdirDialog(renameSubdirRef)">取消</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, nextTick,watch } from "vue";
  import { ElMessage } from "element-plus";
  import DocCenterService from "../../api/docCenter";

  import { Base64 } from "js-base64";
  import CryptoJS from "crypto-js";
  const currentUser = JSON.parse(localStorage.getItem("userMessage")).user_name;
  const treeRef = ref();
  const fileInfoData = ref([]);
  // 文件下载路径
  const DirPath = ref("");
  const isSearch = ref(false);
  const searchKey = ref("");
  const fileDocData = ref([]);
  const fileEmptyText = ref("暂无数据");
  
  // 树状结构对应的映射
  const defaultProps = {
    children: "DirAttVOList",
    label: "DirName",
    isLeaf: "leaf",
  };
  const keywordsVisible = ref(false);
  const keywordsRef = ref();
  const keywordsForm = ref({});
  const keywordsOptions = ref([]);
  const fileInfoVisible = ref(false);
  const fileInfoRef = ref();
  const fileInfoForm = ref({});
  // 自定义的校验 关键词中不允许出现英文逗号
  const notAllowComma = (rule, value, callback) => {
    if (value && value.length > 0) {
      const havaCommaArray = value.filter((item) => item.indexOf(",") > -1);
      if (havaCommaArray.length > 0) {
        callback(new Error("关键词中不允许出现英文逗号：' , '"));
      }
      callback();
    } else {
      callback();
    }
  };
  // 校验规则
  const rules = {
    DirPath: [{ required: true, message: "请填写目录地址", trigger: "blur" }],
    DirName: [{ required: true, message: "请填写目录别名", trigger: "blur" }],
    keywordsArray: [{ validator: notAllowComma, trigger: "change" }],
    newPath: [{ required: true, message: "请填写新目录名", trigger: "blur" }],
  };
  
  const activeHeight = ref(0);
  // 表格的动态高度
  onMounted(() => {
    activeHeight.value = document.querySelector(".el-main").clientHeight -110;
    window.addEventListener("resize", () => {
      activeHeight.value = document.querySelector(".el-main").clientHeight -110;
    });
    // 获取最新数据
    queryFileInfoData();
  
  });
  

  
  // 查询目录
  const queryFileInfoData = async () => {
    let path = await DocCenterService.GetDirectory({directoryType:'共享资料'})
  
    await DocCenterService.queryFileInfo({ rootPath: path.data }).then((res) => {
     fileInfoData.value = res
  
      searchKey.value = "";
    });
    if (!DirPath.value) return;
    nextTick(() => {
      treeRef.value.setCurrentKey(DirPath.value);
    });
  };
  


  let saveNode = ref({})
  // 节点点击事件
  const nodeClick = (node) => {
    saveNode.value = node.DirPath
    DirPath.value = node.DirPath;
    searchKey.value = "";
    getFileData(node.DirPath, false);
  };
  
  // 获得文件列表
  let copyDATA = ref([])
  const getFileData = async (DirPath) => {
    await DocCenterService.getFileList({ path: DirPath }).then((res) => {
      copyDATA.value = JSON.parse(JSON.stringify(res))
      fileDocData.value = res;
      if( res.length==0){
       
        fileEmptyText.value = "暂无数据";
      }
    
      isSearch.value = false;
    });
  };
  
  //===================上传、上传进度==========================
  
  const uploadFileList = ref([]);
  const uploadDetailsVisible = ref(false);
  
  /** 点击上传按钮，弹出选择文件选择器前的处理 */
  const uploadClick = () => {
    if (!DirPath.value) {
      ElMessage.error("请选择左侧目录");
      return;
    }
    // el-upload 组件中，file-list属性是默认文件列表，其值不会在上传过程中变化，只会在完成时更新，且不会自动清除，需要手动赋值清除
    uploadFileList.value = [];
    var a = document.getElementById("uploadBtn");
    a.click();
  };
  
  /** 关闭上传进度窗口前的处理 */
  const beforeUploadDetailsClose = (done) => {
    const a = uploadFileList.value.some((item) => !item.uploadStatus);
    if (a) {
      ElMessage.error("正在上传文件，窗口暂时不能关闭");
    } else {
      done();
    }
  };
  
  /** 上传文件前的处理 */
  const beforeUpload = (file) => {
    // 弹出上传进度窗口
    uploadDetailsVisible.value = true;
    // 对不符合要求的文件进行校验，return false则会阻止上传
    if (file.size / 1024 / 1024 / 1024 > 1) {
      uploadFileList.value.push({ uid: file.uid, name: file.name, percentage: 100, status: "error", uploadStatus: "文件超过1GB" });
      return false;
    }
  };
  
  /** 上传过程中的处理 */
  const uploadProgress = (event, file, fileList) => {
    // 当上传文件集合为空或其中的项的状态都是error时，把fileList中的数据push到上传文件集合中
    if (uploadFileList.value.length === 0 || uploadFileList.value.every((item) => item.status === "error")) {
      for (let file of fileList) {
        uploadFileList.value.push(file);
      }
    }
  };
  
  /** 上传完成后的处理 */
  const uploadSuccess = (res, file, fileList) => {
    const fileIndex = uploadFileList.value.findIndex((item) => item.uid === file.uid);
    // 由于后端对返回对象进行了封装，取消了内置的Exception，不会返回默认失败的结果，所以根据res.code进行判断是否上传成功
    setTimeout(()=>{

      uploadFileList.value[fileIndex].uploadStatus = "success";
      ElMessage.success('上传成功')
    },1000)
  };
  
  /** 得到上传完成的状态 */
  const getUploadStatus = (file) => {
    if (file.percentage === 100 && file.uploadStatus === "success") {
      getFileData(DirPath.value, searchKey.value ? true : false, searchKey.value);
      return "success";
    } else if (file.uploadStatus) {
      return "exception";
    } else {
      return "";
    }
  };
  
  /** 得到上传统计信息 */
  const getUploadTips = () => {
    const total = uploadFileList.value.length;
    const loading = uploadFileList.value.filter((item) => item.percentage < 100).length;
    const success = uploadFileList.value.filter((item) => item.uploadStatus === "success").length;
    const fail = uploadFileList.value.filter((item) => item.uploadStatus && item.uploadStatus !== "success").length;
    return "上传统计：本次共上传" + total + "个文件，其中" + loading + "个正在上传，上传成功" + success + "个，上传失败" + fail + "个";
  };
  
  //===================搜索==========================
  


  watch(searchKey,()=>{
    fileDocData.value = copyDATA.value.filter((item) => item.file_name.includes(searchKey.value));
  })
  const inputChange = () => {
    if (!DirPath.value) {
      ElMessage.error("请选择左侧目录");
      return;
    }
    isSearch.value = false;

  };
  
  //===================预览、下载、删除==========================
  
  const linkClick = (row) => {
    let orgrinUrl = `${row.file_directory}\\${row.file_name}`.replace(/\\/g, "/");

let orgrinUrls = `http://10.6.100.80:10002/Department/DownloadDepartmentFile?remote_url=${orgrinUrl}`;

var previewUrl =
  orgrinUrls +
  `&fullfilename=${CryptoJS.MD5(row.file_name.split(".")[0]).toString()}.${
    row.file_name.slice(row.file_name.lastIndexOf('.')+1)
  }`;

window.open(
  "http://10.6.100.80:8012/onlinePreview?url=" +
    encodeURIComponent(Base64.encode(previewUrl))
);
  };
  
  const downloadClick = async(row) => {
  let res = await  DocCenterService.DownloadDepartmentFile({remote_url:`${row.file_directory}\\${row.file_name}`})
  
  let filename = res.headers; //下载后文件名
  let filename2 = ""; //下载后文件名
  filename = filename["content-disposition"];
  filename = window.decodeURI(filename);
  filename2 = filename.split(";")[1].split("filename*=UTF-8''")[1];
  filename = filename.split(";")[1].split("filename=")[1];
  const link = document.createElement("a"); // 创建a标签
  const blo = new Blob([res.data], { type: res.data.type }); // 设置下载格式
  link.style.display = "none";
  const url = window.URL.createObjectURL(blo);
  console.log(url)
  link.href = url;
  if (filename == undefined) {
    filename = filename2;
  }
  link.download = filename;

  // link.setAttribute('download', "fileName")3
  document.body.appendChild(link);
  link.click(); // 触发下载
  window.URL.revokeObjectURL(url); // 释放掉blob对象
  document.body.removeChild(link);
  ElMessage({
    message: "成功生成文件",
    type: "success",
  })
};
  
  const deleteDocFile =async (row) => {
    console.log()
    // let path =  await  DocCenterService.GetDirectory({directoryType:saveNode.value.DirName})
    DocCenterService.deleteDocFile({Id:row.Id }).then((res) => {
      getFileData(saveNode.value);
      ElMessage.success("删除成功");
    });
  };
  
  //===================文件关键词==========================
  
  // 获取最新数据
  const queryKeywordsOptions = () => {
    DocCenterService.queryKeywordsOptions().then((res) => {
      keywordsOptions.value = res.data;
    });
  };


  let convertFileSize =(sizeInBytes) => {
  
  if (sizeInBytes >= 100000) {
      // 如果文件大小大于或等于100KB，则转换为MB
      return (sizeInBytes / (1024 * 1024)).toFixed(2) + ' MB';
  } else {
      // 如果文件大小小于100KB，则保留为KB
      return (sizeInBytes / 1024).toFixed(2) + ' KB';
  }
}
  
  // 双击事件
  const rowDBClick = (row) => {
    let keywordsArray = [];
    if (row.docKeywords) {
      for (let keywords of row.docKeywords.split(",")) {
        keywordsArray.push(keywords);
      }
    }
    keywordsForm.value = { id: row.docKeywordsId, filePath: row.docPath, keywords: "", keywordsArray: keywordsArray };
    keywordsVisible.value = true;
  };
  

  const submitKeywordsForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
      if (valid) {
        keywordsForm.value.keywords = keywordsForm.value.keywordsArray ? keywordsForm.value.keywordsArray.sort().toString() : "";
        keywordsForm.value.lastModifyUser = currentUser.userName;
        DocCenterService.saveFileKeywords(keywordsForm.value).then((res) => {
          if (res.code === 200) {
            closeKeywordsDialog(formEl);
            getFileData(DirPath.value, searchKey.value ? true : false, searchKey.value);
            queryKeywordsOptions();
            ElMessage.success("保存成功");
          } else {
            ElMessage.error(res.msg);
          }
        });
      }
    });
  };
  
  const closeKeywordsDialog = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    keywordsForm.value = {};
    keywordsVisible.value = false;
  };
  
  //===================目录信息==========================
  
  const directoryTitle = ref("");
  const driveOptions = ref([]);
 
  
  const submitFileInfoForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
      if (valid) {
        // 判断是否为创建子目录
        let isSubdirectory = false;
        if (directoryTitle.value === "新建子目录") {
          isSubdirectory = true;
          fileInfoForm.value.fileDirPath = subdirPath.value + formartFilePath(fileInfoForm.value.DirPath);
        } else {
          fileInfoForm.value.fileDirPath = fileInfoForm.value.drivePath + formartFilePath(fileInfoForm.value.DirPath);
        }
        fileInfoForm.value.fileDirName = fileInfoForm.value.DirName;
        fileInfoForm.value.lastModifyUser = currentUser.userName;

        DocCenterService.saveFileInfo({ path: `${subdirPath.value}${fileInfoForm.value.DirPath}`}).then((res) => {
          queryFileInfoData();
            closeFileInfoDialog(formEl);
            ElMessage.success("保存成功");
        });
      }
    });
  };
  
  const formartFilePath = (path) => {
    // 格式化路径
    let directory = path;
    directory = directory.replaceAll("/", "\\");
    if (directory.lastIndexOf("\\") === directory.length - 1) {
      directory = directory.substring(0, directory.length - 1);
    }
    return directory;
  };
  
  const closeFileInfoDialog = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    fileInfoForm.value = {};
    fileInfoVisible.value = false;
  };
  
  const subdirPath = ref("");
  const newSubdirectory = (node) => {
    subdirPath.value = node.data.DirPath + "\\";
    directoryTitle.value = "新建子目录";
    fileInfoVisible.value = true;
  };
  

  
  // 删除数据
  const deleteFileInfoClick = (node) => {

    DocCenterService.deleteFileInfo({ path: node.data.DirPath }).then((res) => {
     
      if(res.data=='非空文件夹不能删除'){
        DirPath.value = "";
        queryFileInfoData();
        ElMessage.error(res.data);
      }else{
        DirPath.value = "";
        queryFileInfoData();
        ElMessage.success("删除成功");

      }
   
    });
  };
  
  const renameSubdirVisible = ref(false);
  const renameSubdirForm = ref({});
  const renameSubdirRef = ref();

  //重命名子目录
  const renameSubdir = (node) => {
    renameSubdirForm.value = { originPath: node.data.DirPath, newPath: node.data.DirName, parentPath: node.parent.data.DirPath + "\\" };
    renameSubdirVisible.value = true;
  };
  
  // 提交新命名的目录名称
  const submitRenameSubdirForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
      if (valid) {
        renameSubdirForm.value.newPath = renameSubdirForm.value.parentPath + renameSubdirForm.value.newPath;
        DocCenterService.renameSubdirectory({ originPath: renameSubdirForm.value.originPath, newPath: renameSubdirForm.value.newPath }).then(
          (res) => {
            if (res.code === 200) {
              DirPath.value = renameSubdirForm.value.newPath;
              queryFileInfoData();
              closeRenameSubdirDialog(formEl);
              ElMessage.success("保存成功");
            } else {
              ElMessage.error(res.msg);
            }
          },
        );
      }
    });
  };
  
  // 关闭目录名称修改弹窗
  const closeRenameSubdirDialog = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    renameSubdirForm.value = {};
    renameSubdirVisible.value = false;
  };
  </script>
  <style scoped lang="scss">


::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
  }

  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent;
  }
  .foloder-list ::v-deep .el-card__body {
    padding: 0;
  }
  .file-directory{
  background-color: white ;


  padding: 10px;
  }


::v-deep .el-text{

  cursor: pointer;
  
}

  </style>
  